<template>
  <chart :options="opts" :width="width" :height="height || '140px'"></chart>
</template>

<script>
export default {
  name: 'Gauge',

  props: ['width', 'height', 'options', 'seriesData', 'smooth', 'lineColor'],

  computed: {
    opts () {
      let data1 = this.seriesData[0] || []
      let data2 = this.seriesData[1] || []

      let defaultOptions = {
        series: [
          {
            type: 'line',
            name: '',
            smooth: this.smooth,
            data: data1.map(function (item) {
              return item.value
            }),
            // hoverAnimation: false,
            // symbolSize: 6,
            itemStyle: {
              normal: {
                color: this.lineColor || '#75a084'
              }
            },
            showSymbol: false
          },
          {
            type: 'line',
            name: '',
            smooth: true,
            data: data2.map(function (item) {
              return item.value
            }),
            // hoverAnimation: false,
            // symbolSize: 6,
            itemStyle: {
              normal: {
                color: '#c33531'
              }
            },
            showSymbol: false
          }
        ],
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '30%'
        },
        xAxis: {
          type: 'category',
          data: data1.map(function (item) {
            return item.date
          }),
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitNumber: 3,
          splitLine: {
            show: false
          }
        }
      }

      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
